<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" name="" id="inp" />
    <script>
      // 创建vm实例
      let vm = {};
      // 创建data函数
      let data = {
        msg: "初始化的值",
      };
      // 1.实现数据驱动视图
      Object.defineProperty(vm, "msg", {
        // 当"vm"的"msg"被读取的时候就会被触发
        get() {
          return data.msg;
        },
        // 当"vm"的"msg"被修改的时候就会被触发
        set(val) { // 这边的val是vm的msg被修改后最新得到的值
          document.querySelector("#inp").value = val;
          data.msg = val;
        },
      });

      // 2.实现视图驱动数据
      document.querySelector("#inp").addEventListener("input", function (e) {
        data.msg=e.target.value
      });


      // 3.刚刷新页面时给vm的msg一个默认值
      vm.msg=data.msg


      // v-model的底层原理就是通过Object.defineProperty来动态检测数据的变化同步给视图,再配合input事件监测视图的变化同步给数据
    </script>
  </body>
</html>
